<template>
  <div class="my">
    <div class="myTop">
      <div class="iconfont icon-danlieliebiao"></div>
      <div class="iconfont icon-sousuo"></div>
    </div>
    <div class="user">
      <div class="userImg">
        <img v-if="theUser != ''" :src="theUser.profile.avatarUrl" alt="" />
        <img v-else src="@/assets/img/ic_avatar.png" alt="" />
      </div>
      <div class="userxinx">
        <h2 v-if="theUser != ''">{{ theUser.profile.nickname }}</h2>
        <h2 v-else>未登录</h2>
        <ul>
          <li>
            <span v-if="theUser != ''">{{ theUser.profile.follows }}</span><span>关注</span>
          </li>
          <li>
            <span v-if="theUser != ''">{{ theUser.profile.followeds }}</span><span>粉丝</span>
          </li>
          <li>
            <span v-if="theUser != ''">LV.{{ theUser.level }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="classify">
      <ul>
        <li @click.stop="$router.push('/recentPlay')">
          <img src="@/assets/img/zuijinbof_03.jpg" alt="" />
          <span>最近播放</span>
        </li>
        <li>
          <img src="@/assets/img/bendixiaz_03.jpg" alt="" />
          <span>本地/下载</span>
        </li>
        <li>
          <img src="@/assets/img/yunpan_03.jpg" alt="" />
          <span>云盘</span>
        </li>
        <li>
          <img src="@/assets/img/yigou_03.jpg" alt="" />
          <span>已购</span>
        </li>
        <li>
          <img src="@/assets/img/wode.jpg" alt="" />
          <span>我的好友</span>
        </li>
        <li>
          <img src="@/assets/img/like_07.jpg" alt="" />
          <span>收藏和点赞</span>
        </li>
        <li>
          <img src="@/assets/img/boke_07.jpg" alt="" />
          <span>我的播客</span>
        </li>
        <li>
          <img src="@/assets/img/mu_09.jpg" alt="" />
          <span>音乐罐子</span>
        </li>
      </ul>
      <div class="addmusicApp">
        <span>+音乐应用</span>
      </div>
    </div>
    <div class="favoriteMusic">
      <div class="left">
        <div class="img" @click="
          $router.push({
            path: '/songlistdetails',
            query: {
              id: userplayList[0].id,
            },
          })
        ">
          <img v-if="userplayList != ''" :src="userplayList[0].coverImgUrl" alt="" />
          <img v-else src="@/assets/img/likemusic_03.jpg" alt="" />
        </div>
        <div class="item">
          <h4>我喜欢的音乐</h4>
          <p v-if="userplayList != ''">{{ userplayList[0].trackCount }}首</p>
          <p v-else>0首</p>
        </div>
      </div>
    </div>
    <div class="mytab">
      <van-tabs v-model="active" background="#f8f8f8" animated>
        <van-tab title="创建歌单">
          <div class="addgedan">
            <div class="top">
              <h3>创建歌单({{ userplayList.length-1}}个)</h3>
              <div class="right">
                <span @click.stop="show = true">+</span>
                <i class="iconfont icon-a-shuxing1a2sandianshuxiang"></i>
              </div>
            </div>
            <ul>
              <li v-for="(item, index) in userplayList.slice(1)" :key="index">
                <img v-if="userplayList != ''" :src="item.coverImgUrl" alt="" />
                <div class="cont">
                  <h3>{{ item.name }}</h3>
                  <span>{{ item.trackCount }}首</span>
                </div>
                <i class="iconfont icon-a-shuxing1a2sandianshuxiang"></i>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="收藏歌单">
          <div class="addgedan">
            <div class="top">
              <h3>收藏歌单</h3>
              <div class="right">
                <i class="iconfont icon-a-shuxing1a2sandianshuxiang"></i>
              </div>
            </div>
            <ul class="shoclist">
              <li v-for="(item, index) in collectThePlaylist" :key="index" @click="$router.push({ path: '/songlistdetails',query: {
                id:item.id
              }})">
                <img v-if="userplayList != ''" :src="item.coverImgUrl" alt="" />
                <div class="cont">
                  <h3>{{ item.name }}</h3>
                  <span>{{ item.trackCount }}首</span>
                </div>
                <i class="iconfont icon-a-shuxing1a2sandianshuxiang"></i>
              </li>
              <!-- <li>
                <span>暂无收藏的歌单</span>
              </li> -->
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="show" round animated position="bottom" :style="{ height: '30%' }">
      <div class="createAPlaylist">
        <div class="thde">
          <span @click="show = false">取消</span>
          <span @click.stop="finish">完成</span>
        </div>
        <van-tabs v-model="activeName" title-inactive-color="#A1A1A1" title-active-color="#343434">
          <van-tab title="音乐歌单" name="a">
            <div class="inputing">
              <input type="text" placeholder="输入新建歌单标题" v-model.trim="test" checked="checked" />
            </div>
            <ul>
              <li>
                <div class="rido" @click="checked=!checked"><span
                    :style="{ 'background-color': (checked ?'#ee0a24':'') }"></span></div>
                <span>设置为共享歌单(和好友一起管理)</span>
              </li>
              <li>
                <div class="rido" @click="checked2=!checked2"><span
                    :style="{ 'background-color': (checked2 ?'#ee0a24':'') }"></span></div>
                <span>设置为隐私歌单</span>
              </li>
            </ul>
          </van-tab>
          <van-tab title="视频歌单" name="b">
            <div class="inputing">
              <input type="text" placeholder="输入新建视频歌单标题" />
            </div>
            <ul>
              <li>
                <div class="rido" @click="checked3=!checked3"><span
                    :style="{ 'background-color': (checked3 ?'#ee0a24':'') }"></span></div>
                <span>设置为隐私歌单</span>
              </li>
            </ul>
          </van-tab>
        </van-tabs>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getTheUserDetails,
  getTheUserPlaylist,
  usersNewSongList,
} from "@/api/user";

export default {
  components: {},

  data() {
    return {
      show: false,
      
      activeName: "a",
      active: 2,
      id: JSON.parse(sessionStorage.getItem("userid")) || this.$route.query.id,
      theUser: [],
      userplayList: [],//创建的歌单
      collectThePlaylist:[],//收藏的歌单
      test: "",
      checked:false,
      checked2:false,
      checked3:false,
    };
  },
  methods: {
    finish() {
      usersNewSongList(this.test, "NORMAL");
      this.show = false;
    },
  },
  created() {
    // 获取用户详情
    getTheUserDetails(this.id).then((data) => {
      this.theUser = data;
    });
    //获取用户歌单
    getTheUserPlaylist(this.id).then((data) => {
      if (data.code == 200) {
       this.userplayList =  data.playlist.filter(item=>{
          return !item.subscribed
        });
     
        this.collectThePlaylist = data.playlist.filter(item => {
          return item.subscribed
        });
      }
    });
  },
};
</script>

<style lang="scss" scoped>



.my {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .myTop {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    div {
      font-size: 20px;
    }
  }
  .user {
    width: 90%;
    margin: auto;
    height: 90px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .userImg {
      width: 50px;
      height: 50px;
      position: absolute;
      top: -25px;
      left: 43%;
      border-radius: 50%;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .userxinx {
      position: absolute;
      top: 30px;
      width: 100%;
      height: 50px;

      // background-color: skyblue;
      text-align: center;
      h2 {
        font-weight: bold;
      }
      ul {
        margin-top: 10px;
        display: flex;
        color: #a9a9a9;
        justify-content: center;
        li {
          padding: 0 8px;
          border-right: 1px solid #a9a9a9;
          &:last-child {
            border: 0;
          }
        }
      }
    }
  }
  .classify {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    ul {
      display: flex;
      flex-wrap: wrap;
      // flex-direction: column;
    }
    li {
      width: 25%;
      text-align: center;
      margin-top: 20px;
      color: #666a6d;
      img {
        width: 30px;
        height: 30px;
        display: block;
        margin: auto;
      }
      span {
        margin-top: 10px;
        font-size: 14px;
        display: block;
      }
    }
    .addmusicApp {
      margin-top: 10px;
      border-top: 1px solid #e8e8e8;
      color: #585353;
      text-align: center;
      width: 100%;
      height: 35px;
      line-height: 35px;
    }
  }
  .favoriteMusic {
    width: 90%;
    height: 80px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background-color: #fff;
    border-radius: 10px;
    .left {
      display: flex;
      .img {
        width: 60px;
        height: 60px;
     
          border-radius: 8px;
      }
      img {
        width: 100%;
        border-radius: 8px;
      }
      .item {
        margin-left: 10px;
        margin-top: 10px;

        h4 {
          color: #3d3d3d;
          font-weight: bold;
        }
        p {
          margin-top: 10px;
          color: #ababab;
        }
      }
    }
  }
  .mytab {
    padding-bottom: 20px;
    .addgedan {
      width: 90%;
      margin: 10px auto;
      background-color: #fff;

      border-radius: 10px;
      .top {
        display: flex;
        height: 30px;
        align-items: center;

        justify-content: space-between;
        h3 {
          font-size: 14px;
          color: #9b9a9a;
          margin-left: 10px;
        }
        .right {
          margin-right: 5px;
          color: #9b9a9a;
          span {
            font-size: 18px;
            margin-right: 5px;
          }
          i {
            margin-left: 5px;
            font-size: 18px;
          }
        }
      }
      ul {
        height: 100%;
        margin-bottom: 40px;
        li {
          padding-bottom: 10px;
          display: flex;
          align-items: center;

          img {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            margin: 0 10px;
          }
          .cont {
            flex: 1;
            h3 {
              font-size: 14px;
            }
            span {
              color: #9b9a9a;
              font-size: 12px;
            }
          }
          i {
            font-size: 18px;
            margin-right: 5px;
            color: #9b9a9a;
          }
        }
      }
      .shoclist {
        // height: 50px;
        // color: #9b9a9a;
        // font-size: 14px;
        // border-radius: 10px;
        // display: flex;
        // justify-content: center;
        li {
          // text-align: center;
        }
      }
    }
  }
  .createAPlaylist {
    width: 100%;
    margin:  auto;
    .thde {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      
    }

    .inputing {
      margin-top: 10px;
      input {
        // width: 100%;
        height: 40px;
        border: 0;
        margin-left: 10px;
        &::-webkit-input-placeholder {
          color: #9f9f9f;
        }
      }
    }
    ul {
      li {
        height: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9f9f9f;
        }
        .rido {
          margin: 0 10px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
          span {
            display: block;
              width: 12px;
              height: 12px;
              border-radius: 50%;
            
          }
        }
      }
    }
  }
}
</style>